<!--
 * @Author: wangming
 * @Date: 2021-05-31 10:56:38
 * @LastEditors: wangming
 * @LastEditTime: 2022-06-28 15:15:55
 * @Description: 万能页面渲染组件 初始化context
-->
<template>
  <component
    :id="hmpageInfo.key"
    class="bgwh"
    :is="hmpageInfo.layout.type"
    :formList="formList"
    :layout="hmpageInfo.layout"
    :formData="formData"
    v-if="!!vmEvents"
  ></component>
</template>
<script>
import { Stylee, Events } from "@/utils/Dynamic.js";
import universal from "@/pageComponents/universal/index";
import store from "@/store";
export default {
  name: "universal",
  provide() {
    return {
      parentLayout: "hlLayout",
      Events: () => this.vmEvents,
      authBypage: () => this.authBypage,
      pageKey: this.hmpageInfo.key,
    };
  },
  data() {
    return { vmEvents: null, Stylee: null, authBypage: [] };
  },
  mounted() {
    let authBypageList = store?.state?.design?.authBypage || [];
    this.authBypage = authBypageList.reduce((curr, row) => {
      let [key, auth] = row.split(":");
      if (!auth) {
        curr.push(key);
      } else if (key === this.hmpageInfo.key) {
        curr.push(auth);
      }
      return curr;
    }, []);
    if (!!this.hmpageInfo.css) {
      const pageLess = `#${this.hmpageInfo.key}{
      ${this.hmpageInfo.css}
      }
      `;
      var less = require("less");
      less.render(pageLess).then(
        ({ css }) => {
          this.Stylee = new Stylee(css, this.hmpageInfo.key);
        },
        (err) => {
          console.error(err);
        }
      );
    }
    let { Aside, Footer, Header } = this.hmpageInfo.layout;
    let treelist = [...this.formList, ...Aside, ...Footer, ...Header];
    this.vmEvents = new Events({
      json: this.hmpageInfo.js,
      template: this.hmpageInfo.template,
      pagekeys: this.transformModelTree(treelist),
      composerEvents: this.hmpageInfo.composer,
      parentContent: this.parentContent,
    });
    this.$emit("ready", this.vmEvents);
    this.runReadyFun(this.hmpageInfo.readyFun);
  },
  destroyed() {
    !!this.Stylee && this.Stylee.clearDom();
    let { exports, context } = this.vmEvents;
    exports.destroyed && exports.destroyed(context);
  },
  activated() {
    let { exports, context } = this.vmEvents;
    exports.activated && exports.activated(context);
  },
  props: {
    parentContent: {
      type: Object,
      default: null,
    },
    formList: {
      type: Array,
      default: () => [],
    },
    formData: {
      type: Object,
      default: () => {},
    },
    hmpageInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
    transformModelTree(tree) {
      let queen = [];
      let out = [];
      queen = queen.concat(tree);
      while (queen.length) {
        let first = queen.shift();
        if (first?.children?.length > 0 && first.tagName !== "hlTableAdd") {
          queen = [].concat(first.children, queen);
        }
        if (first?.hlcustomBtn?.children?.length > 0) {
          queen = [].concat(first?.hlcustomBtn, queen);
        }
        if (!!first.key) {
          out.push(first.key);
        }
      }
      return out;
    },
    runReadyFun(readyFun) {
      let { exports, context } = this.vmEvents;
      if (!!exports[readyFun]) {
        try {
          let { $once } = this;
          exports[readyFun](context, { $once: $once.bind(this) });
        } catch (error) {
          console.log(error);
          if (!!error.message.match("is not a function")) {
            let eventName = error.message.replace(
              /([\D\d]+\.[\D\d]+) is not a function/,
              "$1"
            );
            this.$message.error(`${eventName} 函数不存在或者该实例未初始化`);
          } else {
            console.log(error);
          }
        }
      }
    },
  },
  components: { ...universal },
};
</script>
